<template>
  <view class="page">
    
    <template>
      <view class="example">
        <button type="default" @click="$$p.go('home/map/map')">位置选择</button>
        <button type="default" @click="$$p.go('home/page/page')">分页处理</button>
        <button type="default" @click="goOutWeb">在外部打开网址</button>
        <button type="default" @click="goInWeb">在内部打开网址</button>
        <button type="default" @click="logout">退出登录</button>
        <button type="default" @click="sendReq">发送请求</button>
        <button type="default" @click="abortReq">取消发送请求</button>
        <button type="default" @click="abortAllReq">取消全部发送请求</button>
        <button type="default" @click="retryReq">发送请求，失败重试，重试3次</button>
        <button type="default" @click="syncReq">同步发送，继续上个请求，不发送当前请求</button>
        <button type="default" @click="syncReq1">同步发送，取消上个请求，发送当前请求</button>
        <button type="default" @click="encryptReq">请求加密</button>
        <button type="default" @click="setUInfo">设置用户信息</button>
        <button type="default" @click="getUInfo">获取用户信息</button>
        <button type="default" @click="removeUInfo">删除用户信息</button>
        <button type="default" @click="setUOptions">设置配置信息</button>
        <button type="default" @click="getUOptions">获取配置信息</button>
        <button type="default" @click="removeUOptions">删除配置信息</button>
      </view>
    </template>
		
  </view>
</template>

<script>
import http from '@/common/request.js'
import { mapMutations, mapGetters } from 'vuex';
export default {
  data() {
    return {
			reqList: null,   // 获取列表请求对象
      count: 1,
    };
  },
	
	computed:{
    ...mapGetters(['getUserInfo', 'getOptions']),
	},
	
  onLoad(opt) {
    
  },
  
  methods: {
    ...mapMutations(['setUserInfo', 'removeUserInfo', 'setOptions', 'removeOptions']),
    
    // 去详情页
    goDetail() {
      // 延迟两秒跳转，并在1秒时取消跳转，所以此处不会执行跳转
      const goPage = this.$$p.go({ url: 'home/other/other', delay: 2000 });
      setTimeout(() => {
        goPage.abort();
      }, 1000)
    },
     
    // 外部打开网址
    goOutWeb() {
      this.$$p.goWeb({web: 'http://www.baidu.com', out: true, delay: 1000, login: true})
    },
    
    // 内部打开网址
    goInWeb() {
      this.$$p.goWeb({web: 'http://www.baidu.com', animType: 'zoom', login: true})
    },
    
    // 退出登录
    logout() {
      this.$$t.removeToken();
    },
    
    // 发送请求
    sendReq() {
      this.reqList = this.$$a.testLists({
        page: 2
      });
      this.reqList.then(res => {
        console.log('成功', res)
      }).catch(err => {
        console.log('失败', err)
      })
    },
    
    // 取消请求
    abortReq() {
      this.reqList.abort();
    },
    
    // 取消全部未完成的请求，一般用在 `onBackPress` 页面返回时
    abortAllReq() {
      http.cancelAllRequest();
    },
    
    // 发送请求，失败重试
    retryReq() {
      this.$$a.testLists1({
        page: 2
      }, {
        retryFailCB(res) {
          console.log('重试失败', res)
        },
      }).then(res => {
        console.log('成功', res)
      }).catch(err => {
        console.log('失败', err)
      })
    },
    
    // 同步发送，取消当前请求
    syncReq() {
      this.$$a.testLists2().then(res => {
        console.log('成功', res)
      }).catch(err => {
        console.log('失败', err)
      })
    },
    
    // 同步发送，取消上个请求
    syncReq1() {
      this.$$a.testLists3({
        page: this.count ++
      }).then(res => {
        console.log('成功', res)
      }).catch(err => {
        console.log('失败', err)
      })
    },
    
    // 同步发送，取消上个请求
    syncReq1() {
      this.$$a.testLists3({
        page: this.count ++
      }).then(res => {
        console.log('成功', res)
      }).catch(err => {
        console.log('失败', err)
      })
    },
    
    // 加密请求
    encryptReq() {
      this.$$a.testLists4({
        page: this.count ++
      }).then(res => {
        console.log('成功', res)
      }).catch(err => {
        console.log('失败', err)
      })
    },
    
    // 设置用户信息
    setUInfo() {
      this.setUserInfo({
        nickname: '张三',
        age: 22
      });
      this.setUserInfo({
        sex: '男'
      });
      this.$$t.msg('设置成功！')
    },
    
    // 获取用户信息
    getUInfo() {
      console.log(this.getUserInfo());
    },
    
    // 删除用户信息
    removeUInfo() {
      this.removeUserInfo();
      // this.removeUserInfo('nickname');
      // this.removeUserInfo(['age', 'sex']);
      this.$$t.msg('删除成功！')
    },
    
    // 设置配置 
    setUOptions() {
      this.setOptions({
        xieyi: '我是用户协议',
        yinsi: '我是隐私政策'
      });
      this.setOptions({
        gonggao: '我是系统公告！'
      });
      this.$$t.msg('设置成功！')
    },
    
    // 获取配置
    getUOptions() {
      console.log(this.getOptions());
    },
    
    // 删除配置
    removeUOptions() {
      this.removeOptions();
      // this.removeOptions('xieyi');
      // this.removeOptions(['yinsi', 'gonggao']);
      this.$$t.msg('删除成功！')
    }
  },
  onBackPress() {
    this.abortAllReq();
  }
};
</script>

<style lang="scss" scoped>

</style>
